<template>
    <div class="basic">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>音乐列表</span>
                    <el-button type="primary" style="float: right;" @click="winopen">导出</el-button>
                </div>
            </template>
            <el-table :data="tableData.value" v-if="tableData.value?.length > 0" border style="width: 100%">
                <!-- <el-table-column type="index" fixed label="序号" width="180" /> -->
                <el-table-column prop="group" label="序号" width="180" />
                <el-table-column label="歌曲名字">
                    <template #default="scope">
                        {{ scope.row.name }}
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="editdialog(scope.row)">编辑</el-button>
                        <el-button link type="primary" size="small" @click="deltab(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-button class="mt-4" type="primary" plain style="margin-top:30px; width: 100%"
                @click="opendialog">新增</el-button>
        </el-card>



        <el-dialog v-model="dialogVisible" title="设定" width="30%" :before-close="cancal">

            <el-table :data="dialogtable.value" border style="width: 100%">
                <el-table-column label="序号">
                    <template #default="scope">
                        <el-input v-model="scope.row.group" placeholder="请输入序号" />
                    </template>
                </el-table-column>
                <el-table-column label="歌曲">
                    <template #default="scope">
                        <el-input v-model="scope.row.name" />
                    </template>
                </el-table-column>
            </el-table>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancal()">取消</el-button>
                    <el-button type="primary" @click="submit">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>



    </div>
</template>
    
<script setup lang='ts' >
import accountdialog from "../../component/accountdialog/accountdialog.vue"
import { reactive, ref } from 'vue'
import { groupList, raterList, groupexcel, groupdel, add_group, groupedit } from "../../api/api"
let tableData: any = reactive({ value: [] })


const getlist = () => {
    tableData.value = []
    groupList({ pagesize: 999 }).then(res => {
        tableData.value = res.data
    })

}
getlist()


let dialogVisible = ref(false)
const opendialog = () => {
    dialogVisible.value = true
    dialogtable.value.push({ group: '', name: '' })
}

const cancal = () => {
    getlist()
    dialogVisible.value = false
    dialogtable.value = []
    isedit.value = false
}



let tabdata: any = reactive({ value: [] })
let isedit = ref(false)
const editdialog = (item: any) => {
    dialogtable.value[0] = item
    dialogVisible.value = true
    isedit.value = true
}

const deltab = (item: any) => {
    groupdel({ id: item.id }).then(res => {
        getlist()
    })

}



const winopen = () => {
    groupexcel({}).then((res: any) => {
        const blob = new Blob([res],);
        const linkNode = document.createElement("a");
        linkNode.download = '音乐列表.doc';
        linkNode.style.display = "none";
        linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
        document.body.appendChild(linkNode);
        linkNode.click(); //模拟在按钮上的一次鼠标单击
        URL.revokeObjectURL(linkNode.href); // 释放URL 对象
        document.body.removeChild(linkNode);
    })
}














const dialogtable: any = reactive({ value: [] })

const submit = () => {
    if (isedit.value) {
        groupedit({ id: dialogtable.value[0].id, group: dialogtable.value[0].group, name: dialogtable.value[0].name }).then(res => {
            if (res.code == 200) {
                ElMessage.success('成功')
            } else {
                ElMessage.warning('失败')
            }
            cancal()
        })
    } else {
        add_group(dialogtable.value[0]).then((res: any) => {
            if (res.code == 200) {
                ElMessage.success('成功')
            } else {
                ElMessage.warning('失败')
            }
            cancal()
        })
    }

}
</script>
    
<style lang="less" scoped>
.basic {

    // background: white;
    // padding: 30px;
    .el-card {
        min-height: calc(100vh - 104px);

    }
}
</style>